<template>
  <div class="user-page">
    <!--header-->
    <el-card>
      <div class="header">
        <!--用户头像-->
        <el-avatar
          v-if="userInfo.avatar"
          :src="avatarUrl"
          :size="64"
          fit="fill">
        </el-avatar>
        <div class="header-middle">
          <!--昵称-->
          <div class="user-info-name">
            {{ userInfo.nickname }}
            <icon-svg v-if="userInfo.sex==='太监'" icon-class="eunuch" class="eunuch-icon"></icon-svg>
            <icon-svg v-if="userInfo.sex==='男'" icon-class="boy" class="man-icon"></icon-svg>
            <icon-svg v-if="userInfo.sex==='女'" icon-class="girl" class="woman-icon"></icon-svg>
            <span v-if="userInfo.vipLevel > 1" class="userInfo-vip2">年度大会员</span>
            <span v-if="userInfo.vipLevel > 0" class="userInfo-vip1">正式会员</span>
          </div>
          <!--个性签名-->
          <!--<div>{{ userInfo.signature }}</div>-->
        </div>
        <!--按钮-->
        <div v-if="$route.query.id !== myId" class="header-button">
          <el-button @click="changeFollow">
            <span v-if="isFollowUser">已关注</span>
            <span v-else>关注</span>
          </el-button>
          <el-button>私信</el-button>
        </div>
      </div>
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo" mode="horizontal"
        router
      >
        <el-menu-item
          index="/userPage/home"
          :route="{ path: '/userPage/home', query: { id: $route.query.id, signature: userInfo.signature}}"
        >
          主页
        </el-menu-item>
        <el-menu-item index="/userPage/dynamic" :route="{ path: '/userPage/dynamic', query: { id: $route.query.id } }">
          动态
        </el-menu-item>
        <el-menu-item index="/userPage/follow" :route="{ path: '/userPage/follow', query: { id: $route.query.id } }">
          关注
        </el-menu-item>
        <el-menu-item index="/userPage/fun" :route="{ path: '/userPage/fun', query: { id: $route.query.id } }">粉丝
        </el-menu-item>
      </el-menu>
    </el-card>
    <!--内容-->
    <el-card style="margin-top: 10px;padding: 20px;">
      <transition name="el-fade-in-linear" mode="out-in">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </el-card>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/const'
import { getUserInfoById } from '@/api/user'
import { changeFollowUser, isFollowUsr } from '@/api/user_follow_user'
import { getId } from '@/utils/auth'
import IconSvg from '@/components/IconSvg'

export default {
  data () {
    return {
      userInfo: {},
      isFollowUser: false
    }
  },
  components: {
    IconSvg
  },
  computed: {
    avatarUrl () {
      return baseUrl + this.userInfo.avatar
    },
    myId () {
      return getId()
    }
  },
  created () {
    this.getUserInfo()
    this.judgeIsFollowUser()
  },
  methods: {
    // 获取用户信息
    async getUserInfo () {
      const res = await getUserInfoById(this.$route.query.id)
      // console.log(res)
      this.userInfo = res.data
      await this.$router.push({
        path: '/userPage/home',
        query: {
          id: this.$route.query.id,
          signature: this.userInfo.signature
        }
      })
    },
    // 是否关注了此用户
    async judgeIsFollowUser () {
      const res = await isFollowUsr(getId(), this.$route.query.id)
      this.isFollowUser = res.isFollowUser
    },
    // 改变关注状态
    async changeFollow () {
      const res = await changeFollowUser(this.isFollowUser, getId(), this.$route.query.id)
      if (res.code === 200) {
        this.isFollowUser = !this.isFollowUser
      }
    }
  }
}
</script>

<style scoped lang="less">
.user-page {
  width: 900px;
  margin: 0 auto;

  .header {
    display: flex;
    height: 164px;
    padding: 0 20px 20px;
    align-items: flex-end;
    background: url("../../assets/background/banner_user.png");
    background-size: contain;

    .header-middle {
      width: 520px;
      margin-left: 20px;
      color: black;
      margin-bottom: 35px;

      .user-info-name {
        font-weight: 700;
        font-size: 22px;
        display: flex;
        align-items: center;
        color: @pink;

        .eunuch-icon {
          color: @menuText;
          font-size: 22px;
          font-weight: lighter;
        }

        .woman-icon {
          color: @pink;
          font-size: 22px;
          font-weight: lighter;
        }

        .man-icon {
          color: @blue;
          font-size: 22px;
          font-weight: lighter;
        }

        .userInfo-vip2 {
          display: inline-block;
          box-sizing: border-box;
          padding: 2px 4px;
          margin-left: 18px;
          background-color: @nickname;
          color: rgb(255, 255, 255);
          font-size: 12px;
          font-weight: lighter;
          border-radius: 4px;
          cursor: pointer;
        }

        .userInfo-vip1 {
          box-sizing: border-box;
          border: 1px solid #99a2aa;
          margin: 0 8px;
          color: #99a2aa;
          border-radius: 4px;
          cursor: default;
          font-size: 12px;
          font-weight: lighter;
          padding: 1px 4px;
        }
      }
    }

    .header-button {
    }
  }
}
</style>
